<template>
  <div class="data-set">
    <div class="type">
      <span class="text">请求方式</span>
      <el-select
        v-model="selectedComponent.request.requestDataType"
        class="select"
      >
        <el-option
          v-for="item of dateType"
          :key="item.value"
          :value="item.value"
          :label="item.name"
        ></el-option>
      </el-select>
    </div>
    <div
      class="static"
      v-if="selectedComponent.request.requestDataType == 'static'"
    >
      <DataMatch :ajax="false" />
    </div>
    <div
      class="ajax"
      v-if="selectedComponent.request.requestDataType == 'ajax'"
    >
      <DataRequest />
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue"
import store from "@/store"
import DataMatch from "./component/dataMatch.vue"
import DataRequest from "./component/dataRequest.vue"
let selectedComponent = computed(() => {
  return store.state.chartEditStore.selectedComponent
})

let dateType = [
  {
    value: "static",
    name: "静态数据",
  },
  {
    value: "ajax",
    name: "动态请求",
  },
  // {
  //   value: "pond",
  //   name: "公共请求",
  // },
]
</script>
<style scoped lang="scss">
.data-set {
  width: 100%;
  height: 100%;
  // overflow: auto;
  .type {
    display: flex;
    align-items: center;
    height: 30px;
    .text {
      width: 80px;
      height: 20px;
      font-size: 14px;
      margin-right: 10px;
    }
    .select {
      flex: 1;
    }
  }
}
</style>
